<template>
  <div class="a">
    <div class="top">
      <p>属性查询</p>
      <div><span>灾害名称</span><el-input></el-input></div>
      <div><span>发生地</span><el-input></el-input></div>
      <div><span>最近监测点</span><el-input></el-input></div>
      <div><span>灾害面积</span><el-input></el-input></div>
      <div><span>至</span><el-input></el-input></div>
      <div><span>威胁人口</span><el-input></el-input></div>
      <div><span>至</span><el-input></el-input></div>
      <div><span>威胁财产</span><el-input></el-input></div>
      <div><span>至</span><el-input></el-input></div>
      <el-button>条件查询</el-button>
    </div>
    <div class="bottom">
      <p>地图查询</p>
      <el-button type="small">多边形查询</el-button>
      <el-button type="small">矩形查询</el-button>
    </div>
  </div>
</template>
<script></script>
<style scoped lang="less">
.top {
  font-size: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  p {
    margin: 10px;
  }
  div {
    display: flex;
    align-items: center;
    margin: 5px;
    .el-input {
      width: 250px;
    }
    span {
      width: 60px;
    }
  }
}
.bottom {
  font-size: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  p {
    margin: 10px;
  }
  .el-button {
    margin: 10px;
  }
}
</style>
